<template>
  <div class="bar button-unselected">
    <div class="content">
      <span 
        class="item hover-style" 
        v-for="(item, index) in conditions" 
        :key="index"
        :class="index == activeIndex ? 'selected' : ''"
        @click="selectNumber(item, index)"
      >
        {{item}}
      </span>
      <span 
          class="icon item"
          :class="count == 0 ? '' : 'active'"
          @click="handleClear">
        <i class="iconfont iconty_qingkong"></i>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    activeIndex: {
      type: Number,
      default: -1
    },
    count: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      conditions: ['大', '小', '单', '双', '全'],
    }
  },
  methods: {
    selectNumber(condition, index) {
      this.$emit('click', index)
    },
    handleClear() {
      this.$emit('clear')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .bar
    border 1px solid rgba(219, 211, 211, 1);
    box-shadow 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
    border-radius 16px;
    width 260px
    height 30px
    .content
      width 100%
      height 30px
      display flex
      justify-content space-around
      align-items center
      box-sizing border-box 
      .item
        font-weight 400
        cursor pointer
        display inline-block 
        box-sizing border-box 
        padding 5px 10px
        &.selected 
          color $color-theme-red
      .icon 
        &.active 
          color $color-theme-red
      
</style>